<template>
<el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false" :close-on-press-escape="false" width="50%" top="60px">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '170px' : '140px'">
        <el-row :gutter="30">
            <el-col :span="12">
                <el-form-item label="职位名称" prop="positionName">
                    <el-input v-model="dataForm.positionName"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="联系人" prop="linkName">
                    <el-input v-model="dataForm.phone"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="联系电话" prop="phone">
                    <el-input v-model="dataForm.phone"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="薪资" prop="money">
                    <el-input v-model="dataForm.money"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="24" style="color: #ddd">
                <el-form-item label="工作地点" prop="address">
                    <el-input v-model="dataForm.address"> </el-input>
                </el-form-item>
            </el-col>
            <el-col :span="24" style="color: #ddd">
                <el-form-item label="工作要求" prop="listType">
                    <div class="item" v-for="(item, index) in dataForm.listType" :key="index" style="margin-bottom: 10px">
                        <el-input v-model="item.txt" style="width:50%"></el-input>
                        <el-link type="danger" style="margin-left: 10px" @click="delListType(index)">删除</el-link>
                    </div>
                    <el-button type="primary" @click="addListType()">新增</el-button>
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item label="内容" prop="workDescribe">
                    <editor-vue :content="dataForm.workDescribe" @EditorChange="getEditor" ref="infoIntroduceRef"></editor-vue>
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
    <template slot="footer">
        <el-button @click="visible = false">{{ $t("cancel") }}</el-button>
        <el-button type="primary" @click="dataFormSubmitHandle()">{{
        $t("confirm")
      }}</el-button>
    </template>
</el-dialog>
</template>

<script>
import Cookies from 'js-cookie'
import debounce from "lodash/debounce";
import editorVue from '@/components/editor'
export default {
    components: {
        editorVue
    },
    data() {
        return {
            visible: false,
            dataForm: {
                positionName: '',
                address: "",
                id: '',
                linkName: "",
                listType: [],
                type: '',
                money: "",
                phone: "",
                workDescribe:''
            },
            startTime: "",
            endTime: "",
        };
    },
    computed: {
        dataRule() {
            return {
                positionName: [{
                    required: true,
                    message: this.$t("validate.required"),
                    trigger: "blur",
                }, ],
                phone: [{
                    required: true,
                    message: this.$t("validate.required"),
                    trigger: "blur",
                }, ],
                workDescribe: [{
                    required: true,
                    message: this.$t("validate.required"),
                    trigger: "blur",
                }, ],
                money: [{
                    required: true,
                    message: this.$t("validate.required"),
                    trigger: "blur",
                }, ],
            };
        },
    },
    methods: {
          getEditor(val) {
            this.dataForm.workDescribe = val;
        },
        init() {
            this.visible = true;
            this.$nextTick(() => {
                this.dataForm.type = "";
                this.$refs["dataForm"].resetFields();
                 setTimeout(() => {
                    this.$refs.infoIntroduceRef.init();
                }, 500);
                if (this.dataForm.id) {
                    this.getInfo();
                }
            });
        },
        addListType() {
            this.dataForm.listType.push({
                txt: ''
            });
        },
        delListType(i) {
            this.dataForm.listType.splice(i, 1)
        },
        //获取信息
        getInfo() {
            this.$http
                .get("/scenic/commrecruit/" + this.dataForm.id)
                .then(({
                    data: res
                }) => {
                    if (res.code !== 0) {
                        return this.$message.error(res.msg);
                    }
                    this.dataForm = {
                        ...this.dataForm,
                        ...res.data,
                    };

                    if (!this.dataForm.type) {
                        this.dataForm.listType = [];
                    } else {
                        let types = this.dataForm.type.split(',');
                        this.dataForm.listType=types.map((item) => {
                            return({
                                txt: item
                            })

                        })
                        console.log(this.dataForm.listType)
                    }

                })
                .catch(() => {});
        },
        // 表单提交
        dataFormSubmitHandle: debounce(
            function () {
                this.$refs["dataForm"].validate((valid) => {
                    if (!valid) {
                        return false;
                    }
                    let typrArr=this.dataForm.listType.map((item)=>{
                      return item.txt
                    })
                    this.dataForm.type=typrArr.join(',')
                    this.$http[!this.dataForm.id ? "post" : "put"](
                            "/scenic/commrecruit",
                            this.dataForm
                        )
                        .then(({
                            data: res
                        }) => {
                            if (res.code !== 0) {
                                return this.$message.error(res.msg);
                            }
                            this.$message({
                                message: this.$t("prompt.success"),
                                type: "success",
                                duration: 500,
                                onClose: () => {
                                    this.visible = false;
                                    this.$emit("refreshDataList");
                                },
                            });
                        })
                        .catch(() => {});
                });
            },
            1000, {
                leading: true,
                trailing: false
            }
        ),
    },
};
</script>

<style scoped lang="scss">
.aui-content {
    .ql-container {
        height: auto !important;
    }

    .xqkc .ql-container.ql-snow {
        height: 300px !important;
    }
}
</style>
